<template>
    <el-date-picker
            v-model="date"
            :type="type"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :value-format="valueFormat"
            :editable="false"
            style="width: 220px;"
            @change="change"/>
</template>

<script>
    export default {
        name: 'datePicker',
        props: {
            type: {
                type: String,
                default: 'daterange',
            },
            valueFormat: {
                type: String,
                default: 'yyyy-MM-dd',
            },
            start: {
                type: String,
                default: ''
            },
            end: {
                type: String,
                default: ''
            }
        },
        computed: {
            date: {
                get() {
                    return [this.start, this.end]
                },
                set(val) {
                    if (val) {
                        this.$emit('update:start', val[0])
                        this.$emit('update:end', val[1])
                    } else {
                        this.$emit('update:start', undefined)
                        this.$emit('update:end', undefined)
                    }
                }
            }
        },
        methods: {
            change(val) {
                this.$emit('change', val)
            }
        }
    }
</script>
